<!--
 * @Descripttion: 
 * @version: @ 1.0.0
 * @Author: 朱江洲
 * @Date: 2021-11-24 16:31:02
 * @LastEditors: 朱江洲
 * @LastEditTime: 2022-05-06 17:58:04
-->
<template>
  <div class="app-container">
    <div class="header">
      <div class="back" @click="goBack">
        <i class="iconfont icon-fanhui1"></i>
        返回订单列表
      </div>
      <div class="orderDetails">订单详情</div>
    </div>
    <div>
      <div class="basics">订单信息</div>
      <el-form :model="orderForm" label-width="100px">
        <el-form-item label="订单编号：">
          {{ orderForm.orderNumber }}
        </el-form-item>
        <el-form-item label="考试名称：">
          {{ orderForm.examName }}
        </el-form-item>
        <el-form-item label="订单金额：">
          <span
            style="
              font-size: 14px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #ff0000;
            "
          >
            {{ orderForm.total }}
          </span>
        </el-form-item>
        <el-form-item label="支付时间：">
          {{ orderForm.paymentTime }}
        </el-form-item>
        <el-form-item label="支付方式：">
          {{ orderForm.paymentType | payType }}</el-form-item
        >
      </el-form>
      <div class="basics">订单信息</div>
      <el-table :data="orderData">
        <el-table-column label="姓名" prop="personName"> </el-table-column>
        <el-table-column label="缴费金额" prop="price"> </el-table-column>
        <el-table-column label="考试名称" prop="examinationName">
        </el-table-column>
        <el-table-column label="批次名称" prop="batchName"> </el-table-column>
        <el-table-column label="手机号码" prop="phone"> </el-table-column>
      </el-table>
      <el-pagination
        prev-text="上一页"
        next-text="下一页"
        background
        :page-size="pageSize"
        :page-sizes="[10, 20, 30, 40, 50, 100]"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        layout=" ->,total,sizes, prev, pager, next, jumper "
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { info, getRegisterInformations } from "@/api/refund";
export default {
  data() {
    return {
      pageNum: 1,
      pageSize: 10,
      total: 0,
      orderForm: {},
      orderData: [],
      id: "",
    };
  },
  filters: {
    payType: function (val) {
      if (val == 1) {
        val = "微信";
      } else if (val == 2) {
        val = "支付宝";
      } else {
        val = "线下支付";
      }
      return val;
    },
  },
  created() {
    var str = window.location.href;
    this.id = str.split("=")[1];
    this.getInfo();
  },
  mounted() {},
  methods: {
    // 获取订单详情人员列表
    getOrderInfo(orderNumber) {
      getRegisterInformations({
        orderNumber: orderNumber,
        pageSize: this.pageSize,
        pageNum: this.pageNum,
      }).then((res) => {
        this.orderData = res.rows;
        this.total = res.total;
      });
    },
    // 获取订单详情
    getInfo() {
      info({
        id: this.id,
      }).then((res) => {
        this.orderForm = res.data;
        this.getOrderInfo(res.data.orderNumber);
      });
    },
    // 获取数据
    getList() {},
    // 返回
    goBack() {
      this.$router.push("/myOrder");
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.pageNum = 1;
      this.getOrderInfo();
    },
    // 分页器
    handleCurrentChange(val) {
      this.pageNum = val;
      this.getOrderInfo();
    },
  },
};
</script>

<style lang="less" scoped>
.basics {
  position: relative;
  font-size: 14px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #2b2b2b;
  padding-left: 24px;
  margin-top: 12px;
}
.basics::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 1px;
  width: 3px;
  height: 14px;
  background: #1267fa;
}
.header {
  width: 100%;
  height: 69px;
  display: flex;
  border-bottom: 1px solid #ececec;
  align-items: center;
  .orderDetails {
    margin: auto;
  }
}
.el-form {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  .el-form-item {
    width: 30%;
    margin-bottom: 5px !important;
  }
}
.el-pagination {
  margin-top: 24px;
  /deep/ .el-pagination__total {
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    margin-right: 25px;
  }
  /deep/ .btn-prev {
    width: 80px;
    height: 40px;
    text-align: center;
  }
  /deep/ .btn-next {
    width: 80px;
    height: 40px;
    text-align: center;
  }
  /deep/ .number {
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
  }
  /deep/ .el-input__inner {
    // width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
  }
  /deep/ .more {
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
  }
  /deep/ .el-pagination__jump {
    .el-input__inner {
      width: 40px;
      height: 40px;
    }
  }
}
</style>